سون لرن • آموزش

آخرین مطالب

امکانات وب

واکنشگرا کردن تصاویر (جلسه 16) : تعاریف - Image Breakpoint - قسمت چهارم

0 5 ۲۹ اردیبهشت ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.

انتخاب Breakpoint بر اساس بودجه Performance و کارایی

چی میشه اگه ما ایده بودجه Performance رو در واکنشگرا کردن تصاویر مورد استفاده قرار بدیم؟ چطوری میشه اون رو تفسیر کرد؟

ما با تعریف کردن یک بودجه برای مقدار بایت اضافی که مرورگر اجازه داره تصویر مورد نظر رو دانلود کنه و در صفحه نشون بده، شروع میکنیم. مثلا ما تصمیم میگیریم که 20 کیلوبایت برای بودجه واکنشگرا کردن هر تصویر قرار بدیم. این موضوع به این معنی هست که ما حق نداریم برای هیچ کدام از منابع تصاویرمون، تصویری رو انتخاب کنیم که از این مقدار بودجه، بایتهای اضافی بیشتری رو دانلود کنه.

زمانی که ما اینکار رو انجام دادیم، ما تعداد تغییرات Image Breakpoint ها رو بر پایه تنوع و گوناگونی نمایشی پیدا میکنیم. بیاید تعدادی مثال رو با هم بررسی کنیم.

تصویر Tim Square : دارای 8 Image Breakpoint

times-square

این تصویر پیچیده هست و تنوع نمایشی زیادی داره. این تنوع و گوناگونی رنگها و الگوها به ما میفهمونه که فشرده کردن این تصویر JPEG باعث افت کیفیت تصویر میشه و به زیبایی اون صدمه میزنه. به این دلیل از 8 Image Breakpoint برای این تصویر استفاده میکنیم که دامنه تغییر حجم اونا تقریبا 20 کیلوبایت هست. جدولی از سایز و حجم اونا رو در زیر ببینید:

شماره Breakpoint	Width	Height	File Size
1	320	213	25K
2	453	302	44K
3	579	386	65K
4	687	458	85K
5	786	524	104K
6	885	590	124K
7	975	650	142K
8	990	660	151K

تصویر Moing in Kettering : دارای 3 Image Breakpoint

kettering-sky

برخلاف تصویر قبلی، این تصویر دارای سطح زیادی با رنگها مشابه هست و تنوع زیادی نداره، به همین دلیل این تصویر میتونه بهتر و بیشتر فشرده بشه و سایزش کاهش پیدا کنه. بدلیل اینکه تصویرمون بهتر و بیشتر میتونه فشرده بشه، بودجه مورد نظر هم متناسب با اون تغییر میکنه و کاهش داده میشه. ما برای این تصویر سه Image Breakpoint در نظر میگیریم.

تعداد Breakpoint	Width	Height	File Size
1	320	213	9.0K
2	731	487	29K
3	990	660	40K

تصویر لوگوی Microsoft : دارای 1 Image Breakpoint

Microsoft_Logo

این تصویر یک تصویر PNG ساده هست. در سایز بزرگ یا 660*990، این تصویر فقط 13 کیلوبایت حجم داره بهمین دلیل که برای بودجمون هم صدق میکنه، نیازی به Breakpoint های بیشتری نیس و یکی کفایت میکنه.

تعداد Breakpoint	Width	Height	File Size
1	990	660	13K

میتونین برای دیدن مثالهای بیشتر به اینجا برید. با دیدن این تصاویر بیشتر با این موضوع و عنوان آشنا میشید.

باید اینو بگیم که پیشنهاد نمیشه که برای تک تک تصاویری که وجود داره این کار رو بصورت دستی انجام بدین. شاید در آینده راهی به وجود بیاد که با وارد کردن بودجه در سرور، خود سرور بیاد و متناسب با تصویر تعداد Image Breakpoint ها رو مشخص کنه و اونا رو تهیه کنه و برای مرورگر بفرسته. در این لینک میتونین بیشتر در مورد بودجه کارایی بخونید.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 383 تاريخ : جمعه 31 ارديبهشت 1395 ساعت: 0:53

واکنشگرا کردن تصاویر (جلسه 15) : تعاریف - Image Breakpoint - قسمت سوم

0 3 ۲۸ اردیبهشت ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.

به چه دلیل سایز دقیق تصویر رو محیا نمیکنیم؟

در این لحظه شاید به نظرتون برسه و با خودتون بگید که چرا از همون سایزی که قرار هست در صفحه نمایش داده بشه استفاده نمیکنیم و خودمون رو راحت کنیم؟!

نخست باید بگیم که تصاویر flexible و انعطاف پذیر در طراحی واکنشگرا با هر تغییر سایز viewport، سایزشون تغییر میکنه. اما اگر ما دقیقا از سایز تصویری که در صفحه قرار است نمایش داده بشه استفاده کنیم، به احتمال زیاد برای هر تغییر سایز viewport یا چرخش صفحه، باید یک منبع تصویر جدید با سایز متفاوت رو لود کرده و نمایش بدیم. بعد از اون اگه دقت کنید، کمی غیر طبیعی هست که هر سایزی که تصور میکنیم رو درست کنیم و قرار بدیم. البته امکانش هست که بصورت داینامیک و پویا سایز تصویر رو متناسب با شرایط تغییر سایز داد، اما زمانی که ما تصاویر رو تغییر سایز میدیم، سرور نیاز به زمان داره تا این کار رو برامون انجام بده و بهمین دلیل کمی طول میکشه تا تصویر به دست مرورگر برسه و نمایش داده بشه.

به همین دلیل بیشتر سایتها سایتهای بزرگ تصاویر خودشون رو بصورت Content Delivery Network یا CDN قرار میدن و اونا رو Cache میکنن. این کار میتونه در مقیاس خیلی بزرگ هزینه ی زیادی داشته باشه و برای هر کسی پیشنهاد نمیشه.

در انتها باید بگیم که مرورگر زمانی که شروع به دانلود تصویر میکنه، از سایز اون در صفحه اطلاعی نداره.

روشهای موجود برای انتخاب Breakpoint های تصاویر

همونطور که در ابتدا بحث Breakpoint ها گفته شد، راه حل کاملا مشخصی برای انتخاب تعداد منابعی که برای نمایش در صفحه احتیاج دارید، وجود نداره. در عوض در اینجا قصد داریم راه حل هایی متفاوتی که میتونین برای این مشکل کارایی داشته باشه رو توضیح بدیم.

تطابق با breakpoint های قالب و صفحتون

یک نفر در تیمتون میگه: "شما فکر میکنید چه تعداد منبع تصویر برای این محصول و سایت مورد نیاز هست؟"

شما لحظه ای فکر میکنید و جواب میدید: "سه عدد چطوره؟ کوچک، متوسط و بزرگ.

اگه همین جواب رو دادین جای نگرانی وجود نداره، چون تقریبا همه افرادی که بر روی واکنشگرا کردن تصاویر کار میکنن چنین جوابی رو خواهند داد.

شاید سازمان شما هنوز هم در مورد موبایل و تبلت و Desktop فکر میکنه و نظر داره که برای اونا تصاویر Small و medium و Large رو لود کنه و قرار بده. این راه خوبی هست و میتونه شما رو از اینکه بخاید برای بیشتر سایزهای معروف viewport یک تصویر جداگونه قرار بدین، خلاص کنه.

اما باید علاوه بر این فکرها، اصولی هم پشت قضیه و کارمون باشه.

تست کردن نماینده و نمونه هایی از تصاویر

ما میتونیم کل سایت و استایلهای تصاویر اون رو مطالعه کنیم و اطلاعات اون رو در بیاریم و بفهمیم که چه Breakpoint هایی نیاز هست. سخت ترین کار اینه که همون نماینده و نمونه رو از سایت پیدا کنید و با توجه به اون تصمیم گیری کنید. اگر سایت مورد نظر استایلهای متفاوتی برای هر تصویر مجزا در نظر نگرفته باشه و همه اونا به یک شکل باشن، میشه بصورت ساده نمونه گیری کرد و برای اون Breakpont مشخص کرد. اما اگر استایلهای متفاوتی وجود داشته باشه در بعضی از مواقع فرآیند نمونه گیری غیر ممکن خواهد بود.

استفاده Memory بر توزیع Breakpoint ها تاثیر دارد

چندی پیش Tim Kadlec فرآیند نمایش تصاویر در موبایلها رو مورد بررسی قرار داد و یک Presentation ارائه کرد. در بررسی که منتشر کرد او استفاده از Memory تصاویر انعطاف پذیر در طراحی واکنشگرا رو مورد آزمایش قرار داد.

چیزی که این شخص به اون پی برد این بود که هر چه تصویر بزرگتر میشه، مقداری که باید کاهش داده بشه بیشتر و بزرگتر هست. memory-usage

در مثال بالا، کاهش دادن سایز تصویر 600*600 پیکسل در هر دو جهت افقی و عمودی به اندازه 50 پیکسل باعث بوجود اومدن 230 هزار بایت حجم اضافی میشه و الکی اونا رو دانلود کردیم. اگر همین کار رو برای تصویر 200*200 پیکسل در نظر بگیریم و اون هم در هر جهت 50 پیکسل کاهش داده بشه، 70 هزار بایت فضای باطل و بیهوده رو لود میکنه.

دانستن این موضوع به ما بهتر میفهمونه که Breakpoint هامون رو چطوری انتخاب کنیم. ما باید هر چه تصویر بزرگتر میشه Breakpoint های بیشتری رو قرار بدیم تا بایتهای بیهوده دانلود نشن. more-breakpoints-at-large-sizes1

متاسفانه در حالیکه این روش به ما میگه که در سایزهای بزرگتر Breakpoint های بیشتری دارید، اما دقیقا نمیگه که این Breakpoint ها در کجا قرار دارن و چه عددی هستند.

در جلسات بعدی با ادامه مطالب در خدمتتون هستم.

موفق و سربلند باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 282 تاريخ : پنجشنبه 30 ارديبهشت 1395 ساعت: 5:57

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 6)

در این مطلب نمونه 6 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
css-hover

کد HTML :

<h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

کد CSS :

100

101

102

103

104

105

106

107

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Rotate */

.hover06 figure img {

-webkit-transform: rotate(15deg) scale(1.4);

transform: rotate(15deg) scale(1.4);

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover06 figure:hover img {

-webkit-transform: rotate(0) scale(1);

transform: rotate(0) scale(1);

}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 281 تاريخ : پنجشنبه 30 ارديبهشت 1395 ساعت: 5:57

timber : دانلود رایگان مجموعه المنتهای وکتور و برداری

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون تعدادی المنت برداری و وکتور قرار داده شده و میتونین اونا رو بصورت رایگان دانلود کرده و استفاده کنید.

برای شروع وارد سایت timber بشین. timber

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 310 تاريخ : پنجشنبه 30 ارديبهشت 1395 ساعت: 5:57

دوره مجازی سئو (جلسه 30): مطالب فصل آخر و جمع بندی دوره - جلسه آخر

0 3 ۲۷ اردیبهشت ۹۵

در این بخش که آخرین جلسه از دوره آموزش سئو هست به مطالب آخر فصل و همچنین جمع بندی مطالب دوره خواهیم پرداخت که دانشجویان نکات مهم دوره را بهتر درک کرده و در بهینه سازی سایت خود روی آنها تمرکز بیشتری داشته باشند. همچنین منابعی را در اخر این جلسه معرفی خواهیم کرد تا از جدیدترین مطالب مربوط به سئو باخبر شوند. مطالب مطرح شده در این جلسه عبارتند از :

مطالب فصل آخر دوره که مربوط به درست یا غلط برخی باورها در رابطه با سئو می باشد.
جمع بندی دوره
معرفی منابع
و...

* آموزش در حال رندر و آپلود می باشد

این مطلب یک جلسه از دوره آموزش جامع سئو و بهینه سازی سایت برای موتورهای جستجو است و برای دیدن آن باید در این دوره ثبت نام کنید .

توضیحات : Seo مخفف Search Engine Optimization به معنای بهینه سازی سایت برای موتور های جستجو می باشد. با توجه به درخواست های بالای کاربران ، مبنی بر برگزاری دوره سئو و همچنین نیاز به برگزاری یک دوره جامع برای آشنایی بیشتر وبمستران با بحث سئو ، برآن شدیم که یکی از دوره های سایت سون لرن را به مبحث SEO اختصاص دهیم. شما اگر بهترین برنامه نویس ، بهترین طراح رابط کاربری باشید و یا به طور کلی صاحب بهترین سایت هم که باشید ، تا زمانی که با بحث SEO آشنایی نداشته باشید نمیتوانید در سطح اینترنت خدمات ، کالا یا ... را به مخاطبانتان معرفی کنید یا به فروش برسانید. بنابرین سئو یک مبحث ضروری برای تمامی وبمستران و طراحان وب سایت می باشد که بایستی با آن آشنایی داشته باشند. متاسفانه بسیاری از طراحان وب و وبمسترها باورهای اشتباهی در رابطه با سئو دارند که باعث میشود این مبحث را یک چیز ساده یا برعکس یه چیز خیلی پیچیده بدانند. آیا میزان سئوی وب سایت خودتان رو براساس ابزار های آنالیز سئو تشخیص میدهید؟ آیا سئوی سایت خود را در طراحی قالب سایت خود می بینید؟ آیا سئوی سایت را در قرار دادن لینک خود در سایت های دیگر می بینید ؟ آیا سئو سایت را در نصب افزونه های موجود برای CMS های خود میدانید؟ بسیاری از سوالات این چنینی ممکن است ذهن شما را درگیر کرده باشد! در این دوره شما با پاسخ این سوالات و نحوه برخورد صحیح با آن ها آشنا خواهید شد. باید بدانید که سئو محدود به یک زمینه خاص نیست ، سئو ؛ ترکیبی از علم ، هنر و خلاقیت است. ما در این دوره سعی می کنیم به صورت جامع شما را با مفاهیم سئو به دور از اغراق و کاملا صادقانه آشنا کنیم تا خودتان بهینه ساز سایت خودتان باشید. امید است این دوره نیز برای شما دوستان گرامی مفید واقع گردد.

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 304 تاريخ : سه شنبه 28 ارديبهشت 1395 ساعت: 4:23

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 4)

در این مطلب نمونه 4 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
css-hover

کد HTML :

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

کد CSS :

100

101

102

103

104

105

106

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Zoom Out #2 */

.hover04 figure img {

width: 400px;

height: auto;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover04 figure:hover img {

width: 300px;

}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 267 تاريخ : سه شنبه 28 ارديبهشت 1395 ساعت: 4:23

mmxv : بهترین سایتهای سال از نظر طراحی

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بهترین وبسایتهای سال از نظر طراحی قرار داده شده و با کلیک بر روی هر ماه میتونین به اطلاعات اون دسترسی داشته باشید و با دیدن اونا ایده بگیرید.

برای شروع وارد سایت mmxv بشین. mmxv1

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 295 تاريخ : سه شنبه 28 ارديبهشت 1395 ساعت: 4:23

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 3)

در این مطلب نمونه 3 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
css-hover

کد HTML :

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

کد CSS :

100

101

102

103

104

105

106

107

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Zoom Out #1 */

.hover03 figure img {

-webkit-transform: scale(1.5);

transform: scale(1.5);

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover03 figure:hover img {

-webkit-transform: scale(1);

transform: scale(1);

}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 297 تاريخ : دوشنبه 27 ارديبهشت 1395 ساعت: 9:12

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 2)

در این مطلب نمونه 2 برای هاور بر تصاویر با عنوان CSS Image Hover رو در اختیارتون قرار میدم. امیدوارم که بتونین از اون ایده بگیرید و یا اینکه از اون در سایتتون استفاده کنید.
css-hover

کد HTML :

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

کد CSS :

100

101

102

103

104

105

106

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Zoom In #2 */

.hover02 figure img {

width: 300px;

height: auto;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover02 figure:hover img {

width: 350px;

}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 254 تاريخ : يکشنبه 26 ارديبهشت 1395 ساعت: 4:15

vertical-fixed-navigation-2 : ساخت منوی زیبای ثابت و عمودی

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون یک منو ثابت و عمودی که واکنشگرا هست رو میسازه و میتونین از اون استفاده کنید. میتونین بر روی دمو در لینک مورد نظر کلیک کنید، تا نتیجه کار رو ببینید.

برای شروع وارد سایت vertical-fixed-navigation-2 بشین. verticalfixednav

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 296 تاريخ : يکشنبه 26 ارديبهشت 1395 ساعت: 4:15

دوره مجازی فاندیشن (جلسه 21) - پلاگین ها - بخش دوم

0 3 ۲۵ اردیبهشت ۹۵

در جلسه بیست و یکم دوره آموزش فریم ورک فاندیشن می پرداریم به ادامه بررسی مبحث پلاگین های خارجی و با نحوه استفاده و کاربر آنها آشنا خواهیم شد... در این جلسه می پردازیم به :

نکته : با توجه به اینکه از جلسه آینده وارد مبحث پروژه نهایی این دوره خواهیم شد لذا برای آماده سازی مراحل کدنویسی پروژه استثنا جسله بعدی به جای سه شنبه , شنبه هفته آینده منتشر خواهد شد...

بررسی پلاگین joyride (پلاگینی برای ایجاد تور در وب سایت) و نحوه استفاده از آن
بررسی پلاگین toggler (پلاگینی برای اضافه کردن کلاس یا کلاس هایی خاص به یک عنصر)
بررسی پلاگین equalizer (پلاگینی برای تنظیم ارتفاع عناصر)

توضیحات : امروزه با توجه به پیشرفت سریع تکنولوژی ,مبحث طراحی رسپانسیو و یا به عبارتی واکنشگرا در زمینه وب جز یکی از موارد اجتناب ناپذیر برای طراحان وب می باشد که در کنار چندین فاکتور اساسی و پایه ای دیگر، از مواردی به شمار می رود که نیاز است قبل از هر چیز و شروع پروژه توجه ویژه ای به آن شود و به عنوان یکی از ارکان اصلی پیاده سازی سایت های اینترنتی در بخش UI (رابط کاربری) و همچنین UX (تجربه کاربری) مد نظر قرار گیرد و توجه ویژه ای به آن شود چرا که عدم توجه به آن می تواند منجر به شکست و زیان دهی پروژه گردد. طبق آمار تا پایان سال ۲۰۱۵ بیش از ۹۱ درصد از مردم دنیا دارایی تلفن همراه هستند و و ۶۰ درصد از این جامعه آماری دارای تلفن های هوشمند در مدل های مختلف هستند و از آن برای اتصال به اینترنت و وبگردی استفاده می کنند حال با توجه به طیف وسیعی از کاربرانی که دارای تلفن های هوشمند در ابعاد و اندازه های مختلف هستند طراحان وب ملزم به طراحی UI و رعایت اصول استاندارد UX در طرح های خود می باشند تا کاربران هدف شان که درصد بالایی در جامعه آماری ذکر شده را تشکیل می دهند بتوانند با هر دستگاهی و در هر اندازه ای به راحتی و بدون دردسر و به هم ریختگی در ظاهر و قالب یک سایت آن را مشاهد و مورد کاوش قرار دهند و تجربه لذت بخشی از وبگردی در سایت مورد نظرشان داشته باشند. از این رو و برای راحتی و سرعت بخشیدن به این نوع طراحی (طراحی واکنشگرا) در کنار رعایت استاندارهای لازم، سالانه فریم ورک های مختلفی در این زمینه طراحی و تولید می شوند و به رقابت با سایر رقبای خود در این زمینه می پردازند. به همین دلیل بر آن شدیم تا یکی از فریم ورک های فوق العاده قدرتمند و با سابقه و محبوب در بین طراحان حرفه ای را به صورت اصولی و از پایه تا پیشرفته در قالب مثال های مختلف و متنوع آموزش دهیم. در پایان نیز با کدنویسی 0 تا 100 یک پروژه کاملا حرفه ای و مدرن، به صورت عملی و کاربردی از این فریمورک حرفه ای استفاده خواهیم کرد. لازم به ذکر است که قالب کنونی وب سایت سون لرن هم بر پایه فریم ورک فاندیشن پیاده سازی و طراحی شده است. در این دوره آخرین نسخه فریمورک فاندیشن (نسخه 6) تدریس خواهد شد و شما به روزترین آموزش این فریمورک را در وب فارسی خواهید داشت. امیدواریم این دوره نیز مورد توجه و استقبال علاقمندان قرار گرفته و مفید واقع گردد...

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 273 تاريخ : شنبه 25 ارديبهشت 1395 ساعت: 20:53

jstips : ترفندهای Javascript برای ارتقای کدنویسی

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون روشها و ترفندهای Javascript زیادی رو قرار داده و میتونین اونا رو مطالعه کرده و استفاده کنید.

برای شروع وارد سایت jstips بشین. jstips

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 395 تاريخ : شنبه 25 ارديبهشت 1395 ساعت: 3:01

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 1)

در این مطب و مطالب بعدی تعدادی افکت زیبا و دیدنی برای هاور بر روی تصاویر یا CSS Image Hover رو در خدمتتون قرار میدم که میتونین از اونا در سایتتون استفاده کنید و از اونا ایده بگیرید.
css-hover

کد HTML :

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

<div>

<span>Hover</span>

</div>

کد CSS :

100

101

102

103

104

105

106

107

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {

color: #333;

font-family: 'Open Sans', sans-serif;

font-weight: 300;

}

h1,

h1+p {

margin: 30px 15px 0;

font-weight: 300;

}

h1+p a {

color: #333;

}

h1+p a:hover {

text-decoration: none;

}

h2 {

margin: 60px 15px 0;

padding: 0;

font-weight: 300;

}

h2 span {

margin-left: 1em;

color: #aaa;

font-size: 85%;

}

.column {

margin: 15px 15px 0;

padding: 0;

}

.column:last-child {

padding-bottom: 60px;

}

.column::after {

content: '';

clear: both;

display: block;

}

.column div {

position: relative;

float: left;

width: 300px;

height: 200px;

margin: 0 0 0 25px;

padding: 0;

}

.column div:first-child {

margin-left: 0;

}

.column div span {

position: absolute;

bottom: -20px;

left: 0;

z-index: -1;

display: block;

width: 300px;

margin: 0;

padding: 0;

color: #444;

font-size: 18px;

text-decoration: none;

text-align: center;

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

opacity: 0;

}

figure {

width: 300px;

height: 200px;

margin: 0;

padding: 0;

background: #fff;

overflow: hidden;

}

figure:hover+span {

bottom: -36px;

opacity: 1;

}

/* Zoom In #1 */

.hover01 figure img {

-webkit-transform: scale(1);

transform: scale(1);

-webkit-transition: .3s ease-in-out;

transition: .3s ease-in-out;

}

.hover01 figure:hover img {

-webkit-transform: scale(1.3);

transform: scale(1.3);

}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 253 تاريخ : شنبه 25 ارديبهشت 1395 ساعت: 3:01

دوره مجازی پلاگین نویسی وردپرس (جلسه 14) : پلاگین آمار بازدید کاربران - نمایش داده ها در بخش مدیریت

0 19 ۲۴ اردیبهشت ۹۵

به نام خدا و سلام. در خدمت شما هستیم با جلسه چهاردهم از دوره مجازی پلاگین نویسی وردپرس. در این جلسه از پلاگین آمار بازدید کاربران قصد داریم داده های که در جدول های مربوطه ثبت کردیم رو در بخش admin سایت نمایش بدیم. برای نمایش داده ها قصد داریم از ویجت های داشبورد وردپرس استفاده می کنیم. در ابتدا کدهای html این بخش را پیاده سازی می کنیم و سپس با استفاده از کلاس wpdb داده های کل بازدید های سایت و کل بازدید های یکتا را دریافت کرده و در html مورد نظر پیاده سازی می کنیم. در این جلسه خواهیم دید :

پیاده سازی بخش html صفحه admin
دریافت داده ها با استفاده از wpdb
نمایش داده ها در بخش html

توضیحات : وردپرس به عنوان محبوب ترین سیستم مدیریت محتوا در بین اکثر کاربران فضای مجازی به خوبی شناخته شده است و این موضوع باعث شده تا سیستم های مختلفی برای وردپرس تهیه و به بازار عرضه شود. هر چند وردپرس خود رایگان است اما قابلیت های توسعه آن از جمله قالب ها و پلاگین ها که به کاربران کمک می کند سیستم مورد نظر خود را پیاده سازی کنند، باعث شده است تا رونق بسیار زیادی در بازار فروش قالب ها و پلاگین های آن ایجاد شود. فروش هایی که تا دهها میلیون دلار هم برای یک افزونه می رسد! در این دوره سعی کرده ایم تمامی مواردی که شما برای تهیه یک پلاگین عالی و کاملا حرفه ای نیاز دارد را قرار دهیم و تدریس نماییم. آموزش ها به صورت کاملا پروژه محور و کاربردی تهیه شده است، پلاگین هایی حرفه ای که هم نحوه ایجاد و کدنویسی آنها را یاد خواهید گرفت و هم آنها را در پایان دوره خواهید داشت. شما پس از گذراندن این دوره قادر خواهید بود هر نوع پلاگین دلخواه دیگری را که فکر می کنید برای سایت خود بنویسید. لازم به ذکر است در صورت سفارش پلاگین های طراحی و کدنویسی شده در این دوره، باید هزینه ای حداقل 800 هزارتومانی بپردازید! در صورتی که در این دوره شما فقط با پرداخت هزینه ای اندک، هم پلاگین نویسی حرفه ای خواهید شد و هم این پلاگین ها را در پایان دوره خواهید داشت. تدریس مباحث این دوره نیز به مانند دوره های دیگر سون لرن، بر اساس اصل صداقت در تدریس و جامع بودن دوره هاست و مدرس تمامی تجربیات حرفه ای خود در این زمینه را به شما انتقال خواهد داد! به جرئت می توانیم ادعا کنیم دوره حاضر حرفه ای ترین و استانداردترین دوره پلاگین نویسی وردپرس است که در سطح ایران برگزار می گردد. پس فرصت را از دست ندهید و خود را به یک پلاگین نویس حرفه ای وردپرس تبدیل کنید!

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 389 تاريخ : جمعه 24 ارديبهشت 1395 ساعت: 19:42

دوره مجازی قالب وردپرس (آپدیت 1) : اضافه کردن منوی کشویی شورتکد ها برای ویرایشگر وردپرس

0 26 ۲۴ اردیبهشت ۹۵

به نام خدا و سلام. در خدمت شما هستیم با قسمت اول از آپدیت های دوره مجازی طراحی قالب حرفه ای وردپرس. در این جلسه قصد داریم تا منوی کشویی شورتکد ها رو در ویرایشگر وردپرس پیاده سازی کنیم. در ابتدا کدهای مورد نظر برای اضافه کردن یک پلاگین tinymce (ویرایشگر وردپرس) رو بررسی می کنیم و سپس با نوشتن کدهای مریوط به گزینه های منو شورت کدهای دلخواه رو که قبلا در سیستم تعریف کردیم رو به منوی مورد نظر اضافه می کنیم. این کار باعث استفاده آسان تر از شورت کدهای تعریف شده برای کاربر نهایی قالب میشه و نیازی به نوشتن کدهای شورتکد در ویرایش گر نیست.

در این جلسه خواهیم دید :

بررسی کدهای اضافه کردن پلاگین tinymce
بررسی کدهای جاوااسکریپت
ایجاد منوهای مختلف برای شورت کدها
ایجاد زیر منوهای مختلف

توضیحات : بعد از درخواست های فراوان دوستان برای برگزاری دوره آموزش طراحی قالب وردپرس به صورت حرفه ای و تلاش سون لرن برای انجام مقدمات برگزاری دوره بالاخره انتظار ها به پایان رسید.در این دوره یک قالب حرفه ای و مردن با افکت های زیبا را به همراه کد نویسی بهینه و هم چنین امکانات متعدد یک وب سایت دانلود و آموزش را با هم پیاده سازی خواهیم کرد.برای راحتی کار دوره به سه بخش کلی تقسیم شده که بخش اول طراحی قالب در فتوشاپ - بخش دوم تبدیل قالب طراحی شده به HTML و CSS و بخش سوم هم پیاده سازی قالب با امکانات حرفه ای در وردپرس هست.چنانچه قبلا در دوره های دیگر سون لرن شرکت کرده اید این دوره علاوه بر آموزش کامل وردپرس تمرینی بسیار حرفه ای برای شما خواهد بود و هم اکنون با محتوایی غنی تر و حرفه ای تر و قیمتی بسیار کمتر از آن چه در دوره های حضوری وجود دارد می توانید در آن ثبت نام کنید !

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 347 تاريخ : جمعه 24 ارديبهشت 1395 ساعت: 19:42

firefox-devtools : بررسی کامل و جامع Firefox Devtools

در این مطلب میخوام سایتی رو بهتون معرفی کنم که در اون بصورت کامل در مورد Inspector و Developer Tools موجود در Firefox توضیح داده و همه جزئیاتشو با تصویر بیان کرده. میتونین از این آموزش استفاده کنید و دانش خودتون در این زمینه رو افزایش بدین.

برای شروع وارد سایت firefox-devtools بشین. firefoxdevtools

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 302 تاريخ : جمعه 24 ارديبهشت 1395 ساعت: 4:42

کدهای جذاب و دیدنی ( Rotating text ) : متن چرخان و زیبا

در این قسمت میخوام یک کد ( Rotating text ) جالب رو در اختیارتون بزارم.

Rotating text

همونطور که دیدید یک متن در انتها وجود داره و چند لحظه یکبار با افکت چرخان و زیبا به متن دیگه ای تبدیل میشه. میتونین از این ایده در سایت خودتون نیز استفاده کنید.

بدلیل اینکه حجم کدها زیاد بود ، اونارو در انتهای همین مطلب قرار میدم که میتونین اونو دانلود کرده و استفاده کنید. امیدوارم لذت برده باشین.

موفق باشید.

یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 295 تاريخ : جمعه 24 ارديبهشت 1395 ساعت: 4:42

کدهای جذاب و دیدنی ( Secret Project ) : اپلیکیشن با رابط کاربری زیبا

در این قسمت میخوام یک کد ( Secret Project ) جالب رو در اختیارتون بزارم.

Secret Project

همونطور که دیدید یک موبایل شبیه سازی شده و میتونین از فعل و انفعالات اون ایده بگیرید. روی هر دکمه که کلیک کنید، به صفحه مربوط به اون هدایت میشید.

موفق باشید.

یا علی

Source

نوع کد رايگان

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 311 تاريخ : پنجشنبه 23 ارديبهشت 1395 ساعت: 18:38

wpsecureforms : تولیدکننده کد فرم Ajax امن برای وردپرس

در این مطلب میخوام سایتی رو بهتون معرفی کنم که با استفاده از اون میتونین فرمهای امنی رو بصورت Ajax تهیه کنید و درون سایت وردپرسی خودتون قرار بدین. در ابتدا مواردی که مدنظرتون هست رو انتخاب میکنید و بعد از اون خروجی رو بهتون میده و هر کدوم از کدهارو در جایی که ذکر میکنه قرار بدین.

برای شروع وارد سایت wpsecureforms بشین. WPForm

امیدوارم بدردتون بخوره.

موفق باشید.

یا علی

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 307 تاريخ : پنجشنبه 23 ارديبهشت 1395 ساعت: 18:38

دوره مجازی فاندیشن (اطلاعیه) : شرکت در نظرسنجی و دریافت اعتبار هدیه

0 3 ۲۳ اردیبهشت ۹۵

با عرض سلام خدمت تمامی دانشجویان دوره مجازی فریم ورک فاندیشن سون لرن همانطور که اطلاع دارید تا کنون 20 جلسه از این دوره در سایت منتشر شده و در اختیار شما عزیزان قرار گرفته است لذا با نزدیک شدن به پایان دوره یک سیستم نظرسنجی و ارائه ی نظرات , پیشنهادات و انتقادات برای این …

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 262 تاريخ : پنجشنبه 23 ارديبهشت 1395 ساعت: 18:37

سون لرن • آموزش

آخرین مطالب

امکانات وب

واکنشگرا کردن تصاویر (جلسه 16) : تعاریف - Image Breakpoint - قسمت چهارم

واکنشگرا کردن تصاویر (جلسه 15) : تعاریف - Image Breakpoint - قسمت سوم

به چه دلیل سایز دقیق تصویر رو محیا نمیکنیم؟

روشهای موجود برای انتخاب Breakpoint های تصاویر

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 6)

timber : دانلود رایگان مجموعه المنتهای وکتور و برداری

دوره مجازی سئو (جلسه 30): مطالب فصل آخر و جمع بندی دوره - جلسه آخر

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 4)

mmxv : بهترین سایتهای سال از نظر طراحی

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 3)

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 2)

vertical-fixed-navigation-2 : ساخت منوی زیبای ثابت و عمودی

دوره مجازی فاندیشن (جلسه 21) - پلاگین ها - بخش دوم

jstips : ترفندهای Javascript برای ارتقای کدنویسی

استایل زیبا برای هاور بر تصاویر - CSS Image Hover ( نمونه 1)

دوره مجازی پلاگین نویسی وردپرس (جلسه 14) : پلاگین آمار بازدید کاربران - نمایش داده ها در بخش مدیریت

دوره مجازی قالب وردپرس (آپدیت 1) : اضافه کردن منوی کشویی شورتکد ها برای ویرایشگر وردپرس

firefox-devtools : بررسی کامل و جامع Firefox Devtools

کدهای جذاب و دیدنی ( Rotating text ) : متن چرخان و زیبا

کدهای جذاب و دیدنی ( Secret Project ) : اپلیکیشن با رابط کاربری زیبا

wpsecureforms : تولیدکننده کد فرم Ajax امن برای وردپرس

دوره مجازی فاندیشن (اطلاعیه) : شرکت در نظرسنجی و دریافت اعتبار هدیه

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه